<template>
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
      <q-card class="q-ma-sm">
        <q-toolbar color="info">
          <q-toolbar-title class="flex flex-center">
            滚动发布列表
          </q-toolbar-title>
        </q-toolbar>
        <pub-item :dragList="rollPub" :showPv="false" :color="'info'" class="bg-blue-grey-1" id="roll"></pub-item>
        <q-card-actions class="bg-blue-grey-1">
          <q-btn color="info" @click.native="rollPubDialog=true" style="margin-left:auto;">滚动发布</q-btn>
        </q-card-actions>
        <q-toolbar inverted  color="secondary">
          <q-toolbar-title class="flex flex-center">
            已发布情况
          </q-toolbar-title>
        </q-toolbar>
        <pub-done :dragList="rollDone" :showPv="false" :group="'roll'"></pub-done>
      </q-card>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
      <q-card class="q-ma-sm">
        <q-toolbar color="secondary">
          <q-toolbar-title class="flex flex-center">
            备选列表
          </q-toolbar-title>
        </q-toolbar>
        <pub-item :dragList="waitPub" :showPv="false" :color="'secondary'" class="bg-blue-grey-1" id="wait"></pub-item>
        <q-item class="bg-blue-grey-1">
          <q-item-side left >
            <q-icon name="chevron_left" size="25px"></q-icon>
          </q-item-side>
          <q-item-main label="将标签拖动至左右两个窗格上方进行不同方式的发布"/>
          <q-item-side right>
            <q-icon name="chevron_right" size="25px"></q-icon>
          </q-item-side>
        </q-item>
        <q-toolbar inverted color="secondary">
          <q-toolbar-title class="flex flex-center">
            滚动发布进度{{rollProcess}}%
          </q-toolbar-title>
        </q-toolbar>
        <q-progress :percentage="rollProcess" color="info" stripe animate style="height: 45px" />
        <q-toolbar inverted color="secondary">
          <q-toolbar-title class="flex flex-center">
            灰度发布进度{{grayProcess}}%
          </q-toolbar-title>
        </q-toolbar>
        <q-progress :percentage="grayProcess" color="negative" stripe animate style="height: 45px" />
      </q-card>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
      <q-card class="q-ma-sm">
        <q-toolbar color="negative">
          <q-toolbar-title class="flex flex-center">
            灰度发布列表
          </q-toolbar-title>
        </q-toolbar>
        <pub-item :dragList="grayPub" :showPv="true" :color="'negative'" class="bg-blue-grey-1" id="gray"></pub-item>
        <q-card-actions class="bg-blue-grey-1">
          <q-btn color="negative" @click.native="grayPubDialog=true" style="margin-left:auto;">灰度发布</q-btn>
        </q-card-actions>
        <q-toolbar inverted color="secondary">
          <q-toolbar-title class="flex flex-center">
            已发布情况
          </q-toolbar-title>
        </q-toolbar>
        <pub-done :dragList="grayDone" :showPv="true" :group="'gray'"></pub-done>
      </q-card>
    </div>
    <verify :vcodeDialog = "rollPubDialog" @upVerify="$store.dispatch('todayPublish/doRollPublish')"
            :verifyTitle="mutiPubTitle" @clsVerify="$store.commit('todayPublish/closeRollDialog')" ></verify>
    <verify :vcodeDialog = "grayPubDialog" @upVerify="$store.dispatch('todayPublish/doGrayPublish')"
            :verifyTitle="mutiPubTitle" @clsVerify="$store.commit('todayPublish/closeGrayDialog')" ></verify>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import todayPublishModule from '../../store/todayPublish'
import listPublishModule from '../../store/listPublish'
export default {
  preFetch ({ store }) {
    store.registerModule('todayPublish', todayPublishModule)
    store.registerModule('listPublish', listPublishModule)
  },
  name: 'pub-center',
  data: function () {
    return this.$store.state.todayPublish
  },
  mounted () {
    this.$store.dispatch('todayPublish/loadList')
    this.$store.dispatch('todayPublish/loadRollList')
    this.$store.dispatch('todayPublish/loadGrayList')
  },
  beforeDestroy () {
    this.$store.commit('todayPublish/clearAll')
    this.$store.unregisterModule('todayPublish')
    this.$store.unregisterModule('listPublish')
  },
  components: {
    draggable,
    'pub-item': () => import('./pubItem'),
    'pub-done': () => import('./pubDone'),
    verify: () => import('components/verify/verify')
  }
}
</script>
